<template>
    <div class="order-item-container">
        <div class="item">
            <div class="item-top">
                <div class="item-top-left">
                    <span class="item-top-left-title">{{ info?.cinemaName }} </span>
                </div>
                <div class="item-top-right" v-if="info?.orderStatus == 1">
                    <div style="display: flex;align-items: center;" v-if="new Date().getTime() <=
                        parseInt(info?.submitTime) + 10 * 60 * 1000">
                        <div style="margin-right: 5px;">待支付</div>
                        <nut-countdown :end-time="parseInt(info?.submitTime) + 10 * 60 * 1000"
                            :start-time="new Date().getTime()" style="color: #5232B7;"
                            @on-end="TimerOver(info)"></nut-countdown>
                    </div>
                    <div v-else>订单超时</div>
                </div>
                <div class="item-top-right" v-if="info?.orderStatus == -1">已超时</div>
                <div class="item-top-right" v-if="info?.orderStatus == 12">已退票</div>
                <div class="item-top-right" v-if="info?.orderStatus == 6">已收货</div>
                <div class="item-top-right" v-if="info?.orderStatus == 5">已出票</div>
                <div class="item-top-right" v-if="info?.orderStatus == 4">待出票</div>
                <div class="item-top-right" v-if="info?.orderStatus == 10">已取消</div>
                <div class="item-top-right" v-if="info?.orderStatus == 11">已流单</div>
                <div class="item-top-right" v-if="info?.orderStatus == 13">已关闭</div>
            </div>
            <div class="item-data">
                <div class="item-data-image">
                    <image v-if="info?.filmPic" :src="info?.filmPic" class="img"></image>
                </div>
                <div class="item-data-right">
                    <div class="item-data-right-camera" v-if="info?.filmName">
                        {{ info?.filmName }}
                    </div>
                    <div class="item-data-right-time" v-if="info?.filmShowTime">
                        <div class="item-data-right-time1">
                            {{ formatShowTimeYear(info?.filmShowTime) }}
                        </div>
                        <div class="item-data-right-time2">
                            {{ formatShowTime(info?.filmShowTime) }} 开场
                        </div>
                    </div>
                    <div class="item-data-right-hall" v-if="info?.showName">
                        {{ info?.showName }}
                    </div>
                    <div class="item-data-right-seat">
                        <div class="item-data-right-seat-item"  v-for="(seat, index) in info?.seatList.filter((item)=>item.changeStatus==1)" :key="index">
                            <template v-if="seat?.seatName">
                                {{ seat?.seatName }}
                            </template>
                        </div>
                    </div>
                    <div class="item-data-right-seat" v-if="info?.whetherChangeSeat==1" style="color: red;">
                        <div class="item-data-right-seat-item" v-for="(seat, index) in info?.seatList.filter((item)=>item.changeStatus==2)" :key="index">
                            <template v-if="seat?.seatName">
                                {{ seat?.seatName }}
                            </template>
                        </div>
                        (已换座)
                    </div>
                </div>
                <div class="item-data-price">
                    <div v-if="info?.cityName">
                        {{ info?.cityName }}
                    </div>
                    <div class="item-data-price-total" v-if="info?.seatCount">
                        共{{ info?.seatCount }}张
                    </div>
                    <div class="item-data-price-number">
                        <span>￥</span>
                        <span style="font-size: 13px;">{{ (info?.priceAll / 100).toFixed(2) }} </span>
                    </div>
                    <div class="item-data-price-number-realPrice" v-if="info?.realPriceAll">
                        <span>￥</span>
                        <span style="font-size: 13px;">{{ (info?.realPriceAll / 100).toFixed(2) }} </span>
                    </div>
                </div>
            </div>
            <div class="price-type">
                <div class="item-data-price-number">
                    <span>原 价:￥</span>
                    <span>{{ (info?.price / 100).toFixed(2) }} </span>
                    <span style="color: #858a99;font-size: 12px;margin-left: 8px;"> x {{ info?.seatCount }}</span>
                </div>
                <div class="item-data-price-number" v-if="info?.inputLimitPrice">
                    <span>限 价:￥</span>
                    <span>{{ (info?.inputLimitPrice / 100).toFixed(2) }} </span>
                    <span style="color: #858a99;font-size: 12px;margin-left: 8px;"> x {{ info?.seatCount }}</span>
                </div>
                <div class="item-data-price-number" v-if="info?.realPrice">
                    <span>结算价:￥</span>
                    <span>{{ (info?.realPrice / 100).toFixed(2) }} </span>
                    <span style="color: #858a99;font-size: 12px;margin-left: 8px;"> x {{ info?.seatCount }}</span>
                </div>
            </div>
            <div class="item-data-footer">
                <div class="item-data-footer-font">
                    <div v-if="info?.orderStatus == 5 || info?.orderStatus == 6">出票时间: {{
                        formatShowTimeYear(info?.updateTicketTime) }} {{
        formatShowTime(info?.updateTicketTime) }}
                    </div>
                    <div v-if="info?.orderStatus == 4">下单时间: {{ formatShowTimeYear(info?.payTime) }} {{
                        formatShowTime(info?.payTime) }}
                    </div>
                    <div v-if="info?.orderStatus == 1">创建时间: {{ formatShowTimeYear(info?.submitTime) }} {{
                        formatShowTime(info?.submitTime) }}</div>
                    <div
                        v-if="info?.orderStatus == 10 || info?.orderStatus == 11 || info?.orderStatus == 12 || info?.orderStatus == 13">
                        创建时间: {{ formatShowTimeYear(info?.submitTime) }} {{
                            formatShowTime(info?.submitTime) }}</div>
                </div>
                <div class="item-data-footer-font-btn">
                    <div v-if="info?.orderStatus == 1 && new Date().getTime() <=
                        parseInt(info?.submitTime) + 10 * 60 * 1000
                        " class="item-data-footer-font-btn1">
                        <div>
                            <nut-button plain type="default" size="small" style="border: 1px solid #eee"
                                @click="cancelOrder">取消订单</nut-button>
                        </div>
                        <div class="right">
                            <nut-button size="small" @click="skipPay" style="border: 0;"
                                color="linear-gradient(to right, #5232B7,#7237BC)">去付款</nut-button>
                        </div>
                    </div>
                    <div v-else-if="info?.orderStatus == 4" class="item-data-footer-font-btn1">
                        <div>
                            <nut-button color="linear-gradient(to right,  #5232B7,#7237BC)" size="small"
                                @click="lanjieOrder" style="border: 0;">尝试拦截</nut-button>
                        </div>
                        <div class="right">
                            <nut-button plain type="default" size="small" style="border: 1px solid #eee"
                                @click="handleClickitem">订单详情</nut-button>
                        </div>
                    </div>
                    <div v-else class="item-data-footer-font-btn2">
                        <nut-button plain type="default" size="small" style="border: 1px solid #eee"
                            @click="handleClickitem">订单详情</nut-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, toRefs, computed, ref } from "vue";
import { Empty } from "@nutui/nutui-taro";
import Taro from "@tarojs/taro";
import * as orderApi from '../../api/order'
import moment from "moment";
//格式年月日
const formatShowTimeYear = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('YYYY-MM-DD');
        return formattedTime
    };
});
// 【格式化】散场时间 时分
const formatShowTime = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('HH:mm');
        return formattedTime
    };
});
// 【格式化】散场时间
const TimeFlag = computed(() => {
    return (str) => {
        new Date().getTime() <= new Date(str).getTime() + 5 * 60 * 1000;
    };
});
const props = defineProps({
    info: Object,
});
const emit = defineEmits(["updated"])
const { info } = toRefs(props);
//订单倒计时 组件 函数
const TimerOver = (e) => {
    e.orderStatus = -1
};
//跳转订单详情
const handleClickitem = () => {
    Taro.navigateTo({
        url: `/pages/order-result/index?orderId=${info.value.orderNumber}`,
    });
};
//订单详情
const skipPay = () => {
    Taro.navigateTo({
        url: `/pages/order-detail/index?orderId=${info.value.orderNumber}`,
    });
};
//拦截订单
const lanjieOrder = () => {
    Taro.showModal({
        title: '提示',
        content: '确定要拦截此订单吗?',
        success: async function (res) {
            if (res.confirm) {
                const data = {
                    orderId: info.value.id
                }
                const result = await orderApi.interceptOrder(data)
                if (result.state == 200) {
                    Taro.showToast({
                        title: "已向渠道提交拦截，但是不保证拦截成功，请您留意下订单状态。（不要先行给买家退款以免造成损失）",
                        icon: "none",
                        duration:2000
                    })
                } else if (result.state == 202) {
                    Taro.showToast({
                        title: result.message,
                        icon: "error",
                        duration: 3000
                    })
                }
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        }
    })
}
//取消订单
const cancelOrder = () => {
    Taro.showModal({
        title: '提示',
        content: '确定要取消吗',
        success: async function (res) {
            if (res.confirm) {
                const data = {
                    orderId: info.value.id
                }
                const result = await orderApi.cancelOrder(data)
                if (result.state == 200) {
                    emit("onupdated", true)
                } else {
                    Taro.showToast({
                        title: result.message,
                        icon: "error",
                        duration: 3000
                    })
                }
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        }
    })
}
</script>
<style lang="scss">
.order-item-container {
    border-radius: 25px;
    padding: 25px;
    box-shadow: 0 0 3px 3px #f6f8f9;
    background-color: #fff;

    .size {
        font-size: 30px;
    }

    .item {
        box-sizing: border-box;

        .item-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            font-size: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;

            .item-top-left {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #858a99;

                .item-top-left-title {
                    // min-width: 300px;
                    display: -webkit-box;
                    /* autoprefixer: ignore next */
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 24px;
                }

                .size {
                    font-size: 30px;
                    font-weight: 700;
                }
            }

            .item-top-right {
                color: #858a99 !important;
                font-size: 24px;
                display: flex;
                justify-content: center;
                align-items: center;

                .nut-countdown__content {
                    color: #5232B7 !important;

                    font-size: 24px;
                }
            }
        }

        .item-data {
            display: flex;
            justify-content: flex-start !important;
            margin-top: 15px;
            font-size: 24px;
            // position: relative;
            color: #15181d;

            .item-data-image {
                width: 156px;
                height: 228px;
                overflow: hidden;
                border-radius: 5px;

                .img {
                    width: 100%;
                    height: 100%;
                    background-size: 100%;
                }
            }

            .item-data-right {
                margin-left: 20px;
                flex: 3;

                .item-data-right-seat {
                    margin-top: 10px;
                    display: flex;
                    flex-wrap: wrap;

                    .item-data-right-seat-item {
                        word-wrap: normal;
                    }

                    .item-data-right-seat-item:nth-child(n + 2) {
                        margin-left: 5px;
                    }

                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    color: #858a99;
                }

                .item-data-right-camera {
                    font-weight: 700;
                    margin-top: 10px;
                    font-size: 24px;
                    // display: -webkit-box;

                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 1;
                    // text-overflow: ellipsis;
                    // overflow: hidden;
                }

                .item-data-right-time {
                    color: #858a99;
                    margin-top: 10px;
                    display: flex;
                    // justify-content: center;
                    align-items: center;

                    .item-data-right-time1 {}

                    .item-data-right-time2 {
                        color: #5232B7;
                        margin-left: 8px;
                        font-size: 24px;
                    }
                }

                .item-data-right-hall {
                    color: #858a99;
                    margin-top: 10px;
                    width: 300px;
                    display: -webkit-box;
                    /* autoprefixer: ignore next */
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }

            .item-data-price {
                display: flex;
                justify-content: space-around;
                // position: absolute;
                // right: 10px;
                // top: 20px;
                justify-content: center;
                flex-direction: column;
                align-items: center;

                .item-data-price-total {
                    font-size: 24px;
                    color: #858a99;
                }

                .item-data-price-number {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 22px;
                    color: #5232B7;
                }

                .item-data-price-number-realPrice {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 22px;
                    color: #099d13;
                }

            }
        }

        .price-type {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 20px;

            .item-data-price-number {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 22px;
                color: #858a99;
                margin-bottom: 5px;
            }
        }

        .item-data-footer {
            display: flex;
            flex-direction: row;
            border-top: 1px solid #eee;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;

            .item-data-footer-font-btn {
                .item-data-footer-font-btn1 {
                    display: flex;

                    .right {
                        margin-left: 20px;

                        .nut-button--default {}
                    }

                }
            }

            .item-data-footer-font {
                font-size: 20px;
                color: #858a99;
            }
        }
    }
}
</style>
